import LoadingTpl from './Loading.vue'
/*
LoadingTpl只是组件对象 不是组件
Vue.component('组件名', LoadingTpl只是组件对象)

需要 让他变成一个组件 我还要得到这个组件实例
如何让一个组件对象变成组件实例 且还需要得到这个实例

创建组件的另一种方式：需要在外部得到这个组件实例时使用

*/
const $loading = {
  install: (Vue) => {
    // t通过Vue.extend(LoadingTpl) 得到一个创建组件的lei
    const LoadingCls = Vue.extend(LoadingTpl)
    // new loadingCls 返回一个组件 实例
    const loadingComponent = new LoadingCls()
    // $mount() 组件渲染（将内部html加载成真实dom）
    const tpl = loadingComponent.$mount().$el
    // 将组件的html挂载到body上
    document.body.appendChild(tpl)
    Vue.prototype.$showLoading = () => {
      loadingComponent.isShow = true
    }
    Vue.prototype.$hideLoading = () => {
      loadingComponent.isShow = false
    }
  }
}
export default $loading
